<template>
    <div class="box">
        <div class="title">{{ routeMsg ?'修改':'添加' }}</div>
        <div class="baodan">
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                status-icon
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
            >
                <el-form-item label="审核人姓名" prop="reviewer_name">
                    <el-input v-model="ruleForm.reviewer_name"  autocomplete="off" />
                </el-form-item>
                <el-form-item label="openid" prop="openid">
                    <el-input v-model="ruleForm.openid"  autocomplete="off" />
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="ruleForm.mobile"  autocomplete="off" />
                </el-form-item>
                <el-form-item label="部门" prop="department">
                    <el-cascader
                    v-model="value"
                    :options="options"
                    :props="props"
                    @change="handleChange"
                    />
                </el-form-item>   
                <el-form-item label="职务" prop="job">
                    <el-input v-model="ruleForm.job"  autocomplete="off" />
                </el-form-item>  
                <el-form-item label="是否启用">
                    <el-switch
                    v-model="ruleForm.is_use"
                    class="mb-2"
                    active-color="green"
                    inactive-color="#ccc"
                    :active-value="1"
                    :inactive-value="0"
                    />   
                </el-form-item>   
                <el-form-item>
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="submit">{{ routeMsg ?'修改':'添加' }}</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">      
import { reactive, ref ,onMounted} from 'vue'
import {getdepartment , addauthen ,upauthen}  from '../../api/admin3';
import type { FormInstance ,FormRules} from 'element-plus'
import {Trembling,throttle} from '../../utils/tool'
import {useRouter,useRoute} from 'vue-router';
import { ElMessage } from 'element-plus'

const ruleForm = reactive<any>({
    department:'',
    reviewer_name:'',
    openid:'',
    mobile:'',
    is_use:1
})

// 路由接收参数
const route = useRoute();
// 接收路由传入的参数
let routeMsg = reactive<any>('');
if(route.query.userlist){      
    routeMsg = route.query.userlist ;
    routeMsg=JSON.parse(routeMsg) 
    console.log(routeMsg,'hhhhhhhhhhhhhhhhh')
    Object.assign(ruleForm, routeMsg); 
}
const router = useRouter();
const ruleFormRef = ref<FormInstance>()
const value:any = ref([])


let options :any= reactive([])
const getdep= async()=>{
    let res:any=await getdepartment()
    console.log(res)
    if(res.code==10000){
        Object.assign(options, res.data[0].son); 
        console.log(8888,options)
    }

}



const handleChange = (value:any) => {
    let res= value.length-1
    ruleForm.department=value[res]
}

const props ={
  value:'id',
  label:'name',
  children:'son'
}



const rules = reactive<FormRules>({
    department: [
        { required: true, message: '请选择部门', trigger: 'blur' }
    ],
    reviewer_name: [
        { required: true, message: '请输入审核姓名', trigger: 'blur' }
    ],
    openid: [
        { required: true, message: '请输入openid', trigger: 'blur' }
    ],
    mobile: [
        { required: true, message: '请输入手机号', trigger: 'blur' }
    ],
})

const submit:any=Trembling(async ()=>{
    if(!ruleFormRef.value) return
    await ruleFormRef.value.validate(async(valid:any, fields:any) => {
        if (valid) {
            if(routeMsg){
                let res:any=await upauthen(ruleForm)
                console.log(666, res)
                if (res && res.code === 10000) {
                    ElMessage({
                        message: '修改成功',
                        type: 'success',
                    })
                    
                    // console.log(res)
                    router.push("/example/list");
                } else {
                    ElMessage({
                        message: res.message,
                        type: 'error',
                    })
                }
            }else{
                let res: any = await addauthen(ruleForm)
                console.log(666, res)
                if (res && res.code === 10000) {
                    ElMessage({
                        message: '添加成功',
                        type: 'success',
                    })
                    
                    // console.log(res)
                    router.push("/example/list");
                } else {
                    ElMessage({
                        message: res.message,
                        type: 'error',
                    })
                }
            }
           
        } else {
            console.log('error submit!', fields)
        }
    })
   
},300)
const cancel=()=>{
    router.push('/authenticator')
}
onMounted(()=>{
    getdep()
})
</script>

<style scoped lang="less">
.box{
    width: 100%;
    height: 100%;
    // background-color: rebeccapurple;
    .title{
        width: 100px;
        height: 40px;
        // background-color: darkcyan;
        font-weight: bold;
        font-size: 24px;
        margin-left: 30px;
        margin-top: 30px;
    }
    .baodan{
        margin-left: 30px;
        margin-top: 20px; 
        width: 400px;
    }
}
</style>